
import storeChart from './random';
export default {
    storeChart: storeChart,
    data() {
        return {
            random: "",
        };
    },
    props: {
        width: {
            default: "100%",
        },
        height: {
            default: "200px",
        },
        isAutoRender: {
            type: Boolean,
            default: true
        },
        params: {
            type: Object,
            default: () => {
                return {
                    dataCols: {

                    },
                    setting: {

                    }
                };
            }
        }
    },
    watch: {
        'params': {
            handler(oldval, newval) {
                this.handleAutoRender();
            },
            deep: true
        }
    },
    computed: {
        style() {
            return {
                width: this.width,
                height: this.height,
            };
        },
    },
    mounted() {
        this.$nextTick(() => {
            window.addEventListener("resize", () => {
                this.handleResize();
            });
            this.handleAutoRender();
        });
    },
    methods: {
        /**
         * init组件；
         */
        initChartConfig() {
            this.initRandom();
            if (storeChart[this.random]) {
                storeChart[this.random].clear();
            } else {
                storeChart[this.random] = echarts.init(this.$el);
            }
        },
        /**
         * 生成随机数，保存各个组件的
         */
        initRandom() {
            this.random = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
                ;
            });

        },
        /**
         * 自动渲染
         */
        handleAutoRender() {
            if (this.isAutoRender) {
                if (!this.params.dataCols || this.params.dataCols.series.length == 0) return; //没有数据时不渲染数据
                this.initChart(this.params);
            }
        },
        /**
         * 获取组件
         */
        getChart() {
            return storeChart[this.random];
        },
        /**
         * 更新组件
         * @param {}} params 
         */
        update(params) {
            if (!storeChart[this.random]) return;
            storeChart[this.random].clear();
            storeChart[this.random].setOption(opt(params), true);
        },
        /**
         * 缩放组件
         */
        handleResize() {
            if (!storeChart[this.random]) {
                return;
            }
            storeChart[this.random].resize();
        },
        /**
         * 点击事件
         */
        handleClick() {
            storeChart[this.random].on("click", (param) => {
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.$emit("on-click", param);
                    console.log(param);
                }, 250);
            });
            storeChart[this.random].on("dblclick", (param) => {
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.$emit("on-dblclick", param);
                    console.log(param);
                }, 250);
            });
        },
    },
    // 销毁组件
    beforeDestroy() {
        clearTimeout(this.timer);
        if (storeChart[this.random]) {
            storeChart[this.random].dispose();
            storeChart[this.random] = null;
            //storeChart = {};
            //this.random = "";
            delete storeChart[this.random]
            window.removeEventListener("resize", () => {
                this.handleResize();
            });
        }
    },

};
